<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <div slot="title">
        生成配置
      </div>
      <!--步骤条-->
      <div>
        <el-steps :active="stepActive" finish-status="success" direction="horizontal" process-status="process">
          <el-step title="数据库表设置">
          </el-step>
          <el-step title="Java实体设置">
          </el-step>
          <el-step title="表单页面">
          </el-step>
          <el-step title="表单校验">
          </el-step>
          <el-step title="列表页面">
          </el-step>
        </el-steps>
      </div>

      <!--页面1-->
      <div v-show="stepActive===0" style="margin-top: 20px">
        <!--表单-->
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="106px"
                   label-position="left">
            <el-col :span="12">
              <el-form-item label="表名" prop="tableName">
                <el-input v-model="formData.tableName" placeholder="请输入表名" clearable :style="{width: '100%'}"
                          @change="changeClassName">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属数据库" prop="databaseName">
                <el-select v-model="formData.databaseId" placeholder="请选择所属数据库" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in databaseOptions" :key="index" :label="item.databaseName"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="说明" prop="tableDesc">
                <el-input v-model="formData.tableDesc" placeholder="请输入表的说明" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主键策略" prop="generationStrategy">
                <el-select v-model="formData.generationStrategy" placeholder="请选择主键策略" clearable
                           :style="{width: '100%'}" @change="generationStrategyChange">
                  <el-option v-for="(item, index) in generationStrategyOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="表类型" prop="tableType">
                <el-select v-model="formData.tableType" placeholder="请选择表类型" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in tableTypeOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类名" prop="className">
                <el-input v-model="formData.className" placeholder="请输入类名" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主表表名" prop="leaderTableId">
                <el-input v-model="formData.leaderTableId" placeholder="请输入主表表名" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="当前表外键" prop="field110">
                <el-input v-model="formData.field110" placeholder="请输入当前表外键" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-button size="mini" type="primary" @click="handleAddColumn()">新增</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteColumn()">删除</el-button>
        </el-row>
        <!--表格-->
        <el-row style="margin-top: 20px">
          <el-table border :data="tableList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="排序" prop="columnOrder"/>
            <el-table-column label="列名" prop="columnName">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.columnName" placeholder="请输入列名" @change="changeClassName"/>
              </template>
            </el-table-column>
            <el-table-column label="注释" prop="columnDesc">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.columnDesc" placeholder="请输入注释"/>
              </template>
            </el-table-column>
            <el-table-column label="物理类型" prop="columnType">
              <template slot-scope="{row,$index}">
                <el-select v-model="row.columnType" placeholder="请选择物理类型" :style="{width: '100%'}">
                  <el-option v-for="(item, index) in jdbcFieldTypeOptions" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>

              </template>
            </el-table-column>
            <el-table-column label="主键" prop="columnKey">
              <template slot-scope="{row,$index}">
                <el-checkbox v-model="row.columnKey"/>
              </template>
            </el-table-column>

          </el-table>
        </el-row>
      </div>


      <!--页面二-->
      <div v-show="stepActive===1" style="margin-top: 20px">
        <!--表格-->
        <el-row style="margin-top: 20px">
          <el-table border :data="tableList">
            <el-table-column label="列名" prop="columnName"/>
            <el-table-column label="注释" prop="columnDesc"/>
            <el-table-column label="Java类型" prop="javaType">
              <template slot-scope="{row,$index}">
                <el-select v-model="row.javaType" placeholder="请选择Java类型" :style="{width: '100%'}">
                  <el-option v-for="(item, index) in javaFieldTypeOptions" :key="index" :label="item.label"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>

              </template>
            </el-table-column>
            <el-table-column label="Java属性名" prop="javaName">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.javaName"></el-input>
              </template>
            </el-table-column>

          </el-table>
        </el-row>
      </div>

      <!--页面三-->
      <div v-show="stepActive===2" style="margin-top: 20px">
        <!--表格-->
        <el-row style="margin-top: 20px">
          <el-table border :data="tableList">
            <el-table-column label="列名" prop="columnName"/>
            <el-table-column label="注释" prop="columnDesc"/>
            <el-table-column label="表单显示" prop="formDisplay">
              <template slot-scope="{row,$index}">
                <el-checkbox v-model="row.formDisplay"/>
              </template>
            </el-table-column>
            <el-table-column label="表单类型" prop="formType">
              <template slot-scope="{row,$index}">
                <el-select v-model="row.formType" placeholder="请选择表单类型" :style="{width: '100%'}">
                  <el-option v-for="(item, index) in formComponentOptions" :key="index" :label="item.label"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>

              </template>
            </el-table-column>
            <el-table-column label="字典类型" prop="javaName">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.javaName"/>
              </template>
            </el-table-column>

          </el-table>
        </el-row>
      </div>

      <!--页面四-->
      <div v-show="stepActive===3" style="margin-top: 20px">
        <!--表格-->
        <el-row style="margin-top: 20px">
          <el-table border :data="tableList">
            <el-table-column label="列名" prop="columnName"/>
            <el-table-column label="注释" prop="columnDesc"/>
            <el-table-column label="可空" prop="validateNullable">
              <template slot-scope="{row,$index}">
                <el-checkbox v-model="row.validateNullable"/>
              </template>
            </el-table-column>
            <el-table-column label="校验类型" prop="validateType">
              <template slot-scope="{row,$index}">
                <el-select v-model="row.validateType" placeholder="请选择校验类型" :style="{width: '100%'}">
                  <el-option v-for="(item, index) in validateTypeOptions" :key="index" :label="item.label"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>

              </template>
            </el-table-column>
            <el-table-column label="最小长度" prop="validateMinLength">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.validateMinLength"/>
              </template>
            </el-table-column>
            <el-table-column label="最大长度" prop="validateMaxLength">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.validateMaxLength"/>
              </template>
            </el-table-column>
            <el-table-column label="最小值" prop="validateMinValue">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.validateMinValue"/>
              </template>
            </el-table-column>
            <el-table-column label="最大值" prop="validateMaxValue">
              <template slot-scope="{row,$index}">
                <el-input v-model="row.validateMaxValue"/>
              </template>
            </el-table-column>

          </el-table>
        </el-row>
      </div>

      <!--页面五-->
      <div v-show="stepActive===4" style="margin-top: 20px">
        <!--表格-->
        <el-row style="margin-top: 20px">
          <el-table border :data="tableList">
            <el-table-column label="列名" prop="columnName"/>
            <el-table-column label="注释" prop="columnDesc"/>
            <el-table-column label="表格显示" prop="tableDisplay">
              <template slot-scope="{row,$index}">
                <el-checkbox v-model="row.tableDisplay"/>
              </template>
            </el-table-column>
            <el-table-column label="表格查询" prop="tableSearch">
              <template slot-scope="{row,$index}">
                <el-checkbox v-model="row.tableSearch"/>
              </template>
            </el-table-column>
            <el-table-column label="查询匹配方式" prop="tableSearchType">
              <template slot-scope="{row,$index}">
                <el-select v-model="row.tableSearchType" placeholder="请选择查询匹配方式" :style="{width: '100%'}">
                  <el-option v-for="(item, index) in tableSearchTypeOptions" :key="index" :label="item.label"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>

              </template>
            </el-table-column>

          </el-table>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="last()" :disabled="stepActive===0">上一步</el-button>
        <el-button @click="next()">下一步</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="handleSave()" :disabled="stepActive!==5">确认</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

  import linkApi from '@/api/database/link'
  import columnApi from '@/api/database/column'
  import jdbcFieldApi from "@/api/gen/config/jdbcField";
  import javaFieldApi from "@/api/gen/config/javaField";
  import formComponentApi from "@/api/gen/config/formComponent";
  import tableApi from "@/api/database/table";
  import {Notification} from 'element-ui';

  export default {
    name: "editDialog",
    data() {
      return {
        dialogVisible: false, //窗口可见
        stepActive: 0, //步骤条
        tableList: [],
        formData: {
          tableName: undefined,
          databaseName: undefined,
          databaseId: undefined,
          tableDesc: undefined,
          generationStrategy: 0,
          tableType: 1,
          className: undefined,
          leaderTableId: undefined,
          field110: undefined,
        },
        rules: {
          tableName: [{
            required: true,
            message: '请输入表名',
            trigger: 'blur'
          }],
          databaseId: [{
            required: true,
            message: '请选择所属数据库',
            trigger: 'change'
          }],
          tableDesc: [{
            required: true,
            message: '请输入表的说明',
            trigger: 'blur'
          }],
          generationStrategy: [{
            required: true,
            message: '请选择主键策略',
            trigger: 'change'
          }],
          tableType: [{
            required: true,
            message: '请选择表类型',
            trigger: 'change'
          }],
          className: [{
            required: true,
            message: '请输入类名',
            trigger: 'blur'
          }],
          leaderTableId: [],
          field110: [],
        },
        generationStrategyOptions: [{
          "label": "UUID",
          "value": 1,
        }, {
          "label": "自增",
          "value": 2,
        }],
        tableTypeOptions: [{
          "label": "单表",
          "value": 1
        }],
        databaseOptions: [],
        jdbcFieldTypeOptions: [],
        javaFieldTypeOptions: [],
        formComponentOptions: [],
        validateTypeOptions: [],
        tableSearchTypeOptions: [],
        selectColumns: [],
      }
    },
    created() {
      this.getAllDatabaseData();
    },
    computed: {},
    methods: {
      handleSelectionChange(val){
        this.selectColumns = val;
      },
      handleDeleteColumn(){
        for (let i = 0; i < this.selectColumns.length; i++) {
          let temp = this.selectColumns[i];
          if (temp.id !== undefined){
            columnApi.deleteOne(temp.id).then(res=>{
              if (!res.success){
                Notification({
                  title: '成功',
                  message: '删除数据失败!',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          }else {
            let index = this.tableList.indexOf(temp, 0);
            this.tableList.splice(index, 1);
          }
        }

      },
      handleAddColumn(){
        this.tableList.push({})
      },
      changeClassName() {
        this.formData.className = this.toHump(this.formData.tableName);
        for (let i = 0; i < this.tableList.length; i++) {
          this.tableList[i].javaName = this.toHump(this.tableList[i].columnName);
        }
      },
      toHump(name) {
        return name.replace(/\_(\w)/g, function (all, letter) {
          return letter.toUpperCase();
        });
      },
      generationStrategyChange() {
        if (this.formData.generationStrategy === 1) {
          this.formData.idType = "String"
        } else if (this.formData.generationStrategy === 2) {
          this.formData.idType = "Integer"
        }
      },
      handleSave() {
        this.formData.columns = this.tableList;
        tableApi.saveOne(this.formData).then(res => {
          if (res.success) {
            Notification({
              title: '成功',
              message: '保存数据成功!',
              type: 'success',
              duration: 2000
            });
            this.dialogVisible = false;
          } else {
            Notification({
              title: '成功',
              message: '保存数据失败!',
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      getFormComponentApiData() {
        formComponentApi.findAll().then(res => {
          this.formComponentOptions = res.data;
        })
      },
      getAllJdbcFieldTypeData() {
        let databaseType = 1;
        for (let i = 0; i < this.databaseOptions.length; i++) {
          if (this.formData.databaseId === this.databaseOptions[i].id) {
            databaseType = this.databaseOptions[i].databaseType;
            break;
          }
        }

        jdbcFieldApi.findAllByDatabase(databaseType).then(res => {
          this.jdbcFieldTypeOptions = res.data;
        })
      },
      getAllJavaFieldTypeData() {
        javaFieldApi.findAll().then(res => {
          this.javaFieldTypeOptions = res.data;
        })
      },
      getAllColumnData() {
        columnApi.findAllByTable(this.formData.id).then(res => {

          this.tableList = res.data;
          console.log(this.tableList)
        })
      },
      getAllDatabaseData() {
        linkApi.findAll().then(res => {
          this.databaseOptions = res.data;
        })
      },
      /*打开窗口*/
      openDialog(data) {
        this.dialogVisible = true;
        console.log(data)
        if (data) {
          this.formData = data;
          this.getAllColumnData();
          this.changeClassName();
          this.generationStrategyChange();
        }else {
          this.formData = {};
          this.tableList = [];
        }
        this.getAllJdbcFieldTypeData();
        this.getAllJavaFieldTypeData();
        this.getFormComponentApiData();
      },
      /*下一步*/
      next() {
        let canNext = true;
        if (this.stepActive === 0) {
          this.$refs['elForm'].validate(valid => {
            canNext = valid;
          })
        }
        if (canNext) {
          if (this.stepActive++ > 4) this.stepActive = 0;
        }

      },
      /*上一步*/
      last() {
        if (this.stepActive > 0) this.stepActive--;
      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }
</script>

<style scoped>

</style>
